<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="app">
  <table style="max-width:600px;margin: 50px auto;" class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in arr" :key="index">
        <td>
          <input type="checkbox">
          {{item.pnc}}
        </td>
        <td>￥{{item.pic}}</td>
        <td>
          <button @click="addd(index)" class="btn btn-xs btn-success">-</button>
          <input type="text" v-model="item.num" style="width: 40px;">
          <button @click="addds(index)" class="btn btn-xs btn-success">+</button>
        </td>
        <td>￥{{item.pic*item.num}}</td>
        <td>
          <button @click="rmoeadd(index)" class="btn btn-danger btn-xs">删除</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">
          <input type="checkbox">
          ￥
        </td>
      </tr>
    </tfoot>
  </table>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
const vm = new Vue ( {
  el: '#app',
  data: {
    arr:[
      {
        pnc: '商品1',
        pic: 19,
        num: 1
      },
      {
        pnc: '商品2',
        pic: 29,
        num: 1
      },
      {
        pnc: '商品3',
        pic: 39,
        num: 2
      },
      {
        pnc: '商品4',
        pic: 49,
        num: 2
      },
    ]
  },
  methods: {
    addds(index){
      this.arr[index].num++
    },
    addd(index){
      if(this.arr[index].num > 1){
        this.arr[index].num--
      }
    },
    rmoeadd(index){
      if(confirm('你确定要删除吗？')){
        this.arr.splice(index,1)
      }
    }
  }
} )
</script>
</html>